<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.layui-carousel-ind {
  text-align: right;
  line-height: 0 !important;
  font-size: 0;
  margin-top: -10px;
}

.layadmin-carousel .layui-carousel-ind ul {
  background: 0 0;
}

.layui-carousel-ind li.layui-this {
  background-color: #999;
}

.layui-carousel-ind li {
  display: inline-block;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  background-color: #e2e2e2;
  margin: 0px 2px;
  cursor: pointer;
}

.layuiadmin-btn-group {
  float: right;
}

.layui-btn-group {
  display: inline-block;
  vertical-align: middle;
}

.layui-btn-group .layui-btn-primary:first-child {
  border-left: 1px solid #c9c9c9;
}

.layui-btn-group .layui-btn:last-child {
  border-radius: 0 2px 2px 0;
}

.layui-btn-group .layui-btn-primary {
  border-left: none;
}

.layui-btn-group .layui-btn {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .5);
  border-radius: 0;
}

.layui-btn {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  background-color: #009688;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.layui-btn-primary {
  border: 1px solid #C9C9C9;
  background-color: #fff;
  color: #555;
}

.layui-btn-xs {
  height: 22px;
  line-height: 22px;
  padding: 0 5px;
  font-size: 12px;
}

.clear span {
  font-size: 12px;
  padding: 5px 0 10px;
}

.layuiadmin-card-list p.layuiadmin-big-font {
  font-size: 24px;
  color: #666;
  line-height: 36px;
  padding: 5px 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}

.layuiadmin-span-color {
  font-size: 14px;
  position: absolute;
  right: 15px;
}

.el-card-define {
  min-height: 100%;
  height: 528px;
}

.el-card__header {
  padding: 5px 0px 10px;
}

.app-inf0 {
  background: url("../../../assets/images/app0.png") no-repeat;
}

.app-inf1 {
  background: url("../../../assets/images/app1.png") no-repeat;
}

.app-inf2 {
  background: url("../../../assets/images/app2.png") no-repeat;
}

.app-inf3 {
  background: url("../../../assets/images/app0.png") no-repeat;
}

.app-inf4 {
  background: url("../../../assets/images/app1.png") no-repeat;
}

.app-inf5 {
  background: url("../../../assets/images/app2.png") no-repeat;
}

.app-inf6 {
  background: url("../../../assets/images/app0.png") no-repeat;
}

.app-inf7 {
  background: url("../../../assets/images/app1.png") no-repeat;
}

.app-inf8 {
  background: url("../../../assets/images/app2.png") no-repeat;
}

.app-inf {
  width: 100%;
  height: 170px;
  overflow: hidden;
  background-size: cover;
}

.app-inf .app-title {
  font-size: 20px;
  font-weight: 600;
  position: relative;
  top: 20px;
  left: 20px;
}

.app-inf .app-option {
  font-size: 14px;
  position: relative;
  top: 100px;
  left: 20px;
  font-weight: 600;
}

.job-inf-title {
  padding-top: 10px;
  padding-left: 10px;
  /*font-weight: 600;*/
}

.job-inf-value {
  padding: 10px;
  font-size: 20px;
}

.job-inf-value span {
  position: relative;
  top: 4px;
}

.job-inf-value img {
  width: 40px;
  height: 40px;
  padding-bottom: 10px;
  float: right;
}

.el-icon-question {
  color: #347DE1
}
</style>
<template>
  <div class="dashboard-container" style="margin-top:-50px">
    <div class="dashboard-editor-container">
      <el-row>
        <el-col :span="16">
          <div style="padding-right:15px">
            <div>
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <div slot="header" class="clearfix">
                  <span>应用列表</span>
                  <div class="layui-carousel-ind" v-if="appListLength > 1">
                    <ul>
                      <li v-for="(vo, index) in appListLength" @mouseenter="change(index)"
                          :class="[index == activeIndex ? 'layui-this':'']"></li>
                    </ul>
                  </div>
                </div>
                <div style="height: 200px">
                  <el-col :span="8" v-for="(item, index) in appList" :key="index"
                          v-if="Math.floor(index / 3) == activeIndex" @click.native="toAppInfr(item)">
                    <el-card :body-style="{ padding: '0px' }" style="cursor: pointer;margin: 10px;">
                      <div :class="'app-inf'+index" class="app-inf" style="

                          position:relative;">
                        <div class="app-title">{{ item.appName }}</div>
                        <div class="app-option" style="position: absolute;margin-top:30px">立即查看<i
                          class="el-icon-arrow-right"></i></div>
                      </div>
                    </el-card>
                  </el-col>
                </div>
              </el-card>
            </div>
            <div>
              <el-card class="box-card appinfcard" :body-style="{ padding: '0px' }" shadow="never">
                <el-col style="width:25%">
                  <el-card class="box-card" :body-style="{ padding: '0px' }">
                    <div class="job-inf-title">
                      待处理任务
                      <el-tooltip class="item" popper-class="testtooltip" effect="dark" content="周期任务 | 定时任务"
                                  placement="bottom">
                        <i style="margin-left: 3%" class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="job-inf-value">
                      <vns :start="0" :end="periodTopData.cycleTaskTodoTotalCount" :times="20" :speed="50"/>
                      <span>|</span>
                      <vns :start="0" :end="cronTopData.cronTaskTodoCount" :times="20" :speed="50"/>
                      <img src="../../../assets/images/todoRun.png">
                    </div>
                  </el-card>
                </el-col>
                <el-col style="width:25%">
                  <el-card class="box-card" :body-style="{ padding: '0px' }">
                    <div class="job-inf-title">
                      处理中任务
                      <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                        <i style="margin-left: 3%" class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="job-inf-value">
                          <span>
                            <vns :start="0" :end="periodTopData.cycleTaskRunningTotalCount" :times="20" :speed="50"/>
                            <span> |</span>
                            <vns :start="0" :end="cronTopData.cronTaskRunningTotalCount" :times="20" :speed="50"/>
                          </span>
                      <img src="../../../assets/images/running.png">
                    </div>
                  </el-card>
                </el-col>
                <el-col style="width:25%">
                  <el-card class="box-card" :body-style="{ padding: '0px' }">
                    <div class="job-inf-title">
                      已完成任务
                      <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                        <i style="margin-left: 3%" class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="job-inf-value">
                          <span>
                            <vns :start="0" :end="periodTopData.cycleTaskSuccessTotalCount" :times="20" :speed="50"/>
                            <span> |</span>
                            <vns :start="0" :end="cronTopData.cronTaskSuccessTotalCount" :times="20" :speed="50"/>
                          </span>

                      <img src="../../../assets/images/runSuccess.png">
                    </div>
                  </el-card>
                </el-col>
                <el-col style="width:25%">
                  <el-card class="box-card" :body-style="{ padding: '0px' }">
                    <div class="job-inf-title">
                      已失败任务
                      <el-tooltip class="item" effect="dark" content="周期任务 | 定时任务" placement="bottom">
                        <i style="margin-left: 3%" class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="job-inf-value">
                          <span>
                            <vns :start="0" :end="periodTopData.cycleTaskFailTotalCount" :times="20" :speed="50"/>
                            <span> |</span>
                            <vns :start="0" :end="cronTopData.cronTaskFailTotalCount" :times="20" :speed="50"/>
                          </span>
                      <img src="../../../assets/images/runFail.png">
                    </div>
                  </el-card>
                </el-col>
              </el-card>
            </div>

            <div>
              <el-card class="el-card-define box-card" :body-style="{ padding: '10px' }">
                <div slot="header" class="clearfix">
                  <span>运行状况历史记录</span>
                </div>

                <div class="grid-content bg-purple">
                  <el-table :show-header="false" :data="logList" v-el-table-infinite-scroll="load" style="width: 100%"
                            stripe>

                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="运行状况">
                            <span>{{ props.row.remindTitle }}</span>
                          </el-form-item>
                          <el-form-item label="时间">
                            <span>{{ props.row.crtTs }}</span>
                          </el-form-item>
                          <el-form-item label="原因">
                            <span>{{ props.row.remindContent }}</span>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>

                    <el-table-column prop="warnLevel" label="运行状况">
                      <template slot-scope="scope">
                        <i class="el-icon-success" v-if="scope.row.warnLevel == 'info'"
                           style="color: #42800d;font-size: 16px"></i>
                        <i class="el-icon-warning" v-if="scope.row.warnLevel == 'warn'"
                           style="color: #FF8300;font-size: 16px"></i>
                        <i class="el-icon-warning" v-if="scope.row.warnLevel == 'error'"
                           style="color: #DE1502;font-size: 16px"></i>
                        <span style="margin-left: 10px">{{ scope.row.remindTitle }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column prop="srcName" label="应用">
                      <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.srcName }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column prop="crtTs" label="时间">
                      <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.crtTs }}</span>
                      </template>
                    </el-table-column>

                  </el-table>
                </div>

              </el-card>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <span>节点状态</span>
              </div>
              <div class="grid-content bg-purple">
                <el-table :data="nodeList" stripe style="width: 100%;" height="260"
                          :header-cell-style="tableHeaderColor" border stripe>

                  <el-table-column prop="cicd" width="40">
                    <template slot-scope="scope">
                      <!-- <span style="margin-left: 10px">{{ scope.row.agentName }}</span> -->
                      <img style="width:12px;vertical-align:middle" src="../../../assets/images/xxx.png" alt=""
                           v-if="(scope.row.agentStatus==2)">
                      <img style="width:12px;height:12px;vertical-align:middle" src="../../../assets/images/success.png"
                           alt="" v-else>
                    </template>
                  </el-table-column>

                  <el-table-column prop="cicd" label="节点">
                    <template slot-scope="scope">
                      <span style="">{{ scope.row.agentName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="usageResNum" :show-overflow-tooltip="true" label="资源数" width="120">
                    <template slot-scope="scope">
                      {{ scope.row.usedResNum }}/{{ scope.row.resNum }}
                      <el-progress :percentage="scope.row.resUsageRate" :show-text=false color="#347DE1"></el-progress>
                    </template>
                  </el-table-column>
                  <el-table-column prop="usageConNum" :show-overflow-tooltip="true" label="并发数" width="120">
                    <template slot-scope="scope">
                      {{ scope.row.usedConNum }}/{{ scope.row.concurrentNum }}
                      <el-progress :percentage="scope.row.conUsageRate" :show-text=false color="#1CA965"></el-progress>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>

          <div>
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <span>各应用【{{ bizDate }}】作业执行统计</span>
                <div class="layui-btn-group layuiadmin-btn-group">
                  <a href="javascript:;" @click="yesterDay" class="layui-btn layui-btn-primary layui-btn-xs">昨日</a>
                  <a href="javascript:;" @click="toDay" class="layui-btn layui-btn-primary layui-btn-xs">今日</a>
                </div>
              </div>
              <div class="grid-content bg-purple">
                <el-table :data="appRunning" stripe style="width: 100%;" height="200"
                          :header-cell-style="tableHeaderColor" border>
                  <el-table-column prop="appName" label="应用名称"/>
                  <el-table-column prop="todo" label="待处理" width="60px"/>
                  <el-table-column prop="toRun" label="可处理" width="60px"/>
                  <el-table-column prop="running" label="处理中" width="60px"/>
                  <el-table-column prop="finish" label="完成" width="60px"/>
                  <el-table-column prop="noFinish" label="未完成" width="60px"/>
                </el-table>
              </div>
            </el-card>
          </div>

          <div>
            <el-card class="box-card" :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix">
                <span>各应用最近30分钟任务执行个数</span>
              </div>
              <div class="grid-content bg-purple" style="padding: 10px;">
                <appLineChart/>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <resetPass ref="pass"/>
  </div>
</template>

<script>
import api from '@/api/dashboard/app'
import appUserApi from '@/api/system/appUser'
import {count} from '@/api/monitor/visits'
import {mapGetters} from 'vuex'
import appBarChart from './components/appBarChart'
import appLineChart from './components/appLineChart'
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import vns from 'vue-number-scroll'
import resetPass from '../../system/user/center/resetPass'
import user from '@/api/system/user'
import {getCrunUserAppPermission} from "../../../api/system/appUser";

/**
 * 记录访问，只有页面刷新或者第一次加载才会记录
 */
count().then(res => {
})
export default {
  name: 'adminDashboard',
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  components: {appBarChart, appLineChart, vns, resetPass},
  data() {
    return {
      bizDate: null,
      hasLogData: true,
      activeIndex: 0,
      pageIndex: 0,
      customColor: "#42800D",
      nodeList: [],
      appList: [],
      appRunning: [],
      appListLength: 0,
      logList: [],
      periodTopData: {
        cycleTaskFailTotalCount: 0,
        cycleTaskSuccessTotalCount: 0,
        cycleTaskRunningTotalCount: 0,
        cycleTaskTodoTotalCount: 0
      },
      cronTopData: {
        cronTaskFailTotalCount: 0,
        cronTaskSuccessTotalCount: 0,
        cronTaskRunningTotalCount: 0,
        cronTaskTodoCount: 0
      }
    };
  },
  created() {
    this.remoteSession();
    this.findAppByCurrentUser();
    this.findNodeByCurrentUser();
    this.findRunningStateLog();
    this.toDay();
    this.isFirstLogin();
    this.findPeriodTaskCountTopDataNotApp();
    this.findCronTaskCountTopDataNotApp();
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    remoteSession() {
      if (localStorage.getItem('appInfo')) {
        localStorage.removeItem('appInfo')
      }
      if (localStorage.getItem('menuPaths')) {
        localStorage.removeItem('menuPaths')
      }
      if (localStorage.getItem('userPermission')) {
        localStorage.removeItem('userPermission')
      }
    },
    isFirstLogin() {
      //登录前做判断,第一次登录需要强制重置密码
      user.isResetPassWord(this.user.username)
        .then((res) => {
          if (res == true) {
            this.$refs.pass.dialog = true
          }
        })
        .catch(() => {
        });
    },
    // 修改table header的背景色
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'background-color: #ebf1fb;font-weight:600;font-size:12px;'
      } else if (rowIndex === 1) {
        return 'background-color: #f7faff;font-size:14px;'
      } else if (rowIndex === 2) {
        return 'background-color: #f7faff;font-size:14px;'
      }
    },
    toAppInfr(item) {
      appUserApi.getCrunUserAppPermission(item.appCode).then(data => {
        let menuPaths = [], userPermission = []
        this.$store.state.user.roles = []
        data.forEach(item => {
          if (item.path) {
            menuPaths.push(item.path)
          }
          if (item.permission) {
            userPermission.push(item.permission)
            this.$store.state.user.roles.push(item.permission)
          }
        })
        localStorage.setItem("menuPaths", JSON.stringify(menuPaths))
        localStorage.setItem("userPermission", JSON.stringify(userPermission))
        localStorage.setItem('appInfo', JSON.stringify(item))
        this.$router.push({path: '/app360/index'});
      })
    },
    findAllJobInfByCurrentUser() {
      api.findAllJobInfByCurrentUser()
        .then(response => {
          for (var i in response) {
            response[i] = Number(response[i])
          }
          this.topData = response
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },

    findPeriodTaskCountTopDataNotApp() {
      api.findPeriodTaskCountTopDataNotApp()
        .then(response => {
          for (var i in response) {
            response[i] = Number(response[i])
          }
          this.periodTopData = response
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findCronTaskCountTopDataNotApp() {
      api.findCronTaskCountTopDataNotApp()
        .then(response => {
          for (var i in response) {
            response[i] = Number(response[i])
          }
          this.cronTopData = response
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },


    load() {
      if (this.hasLogData && this.pageIndex < 100) {
        this.pageIndex++;
        this.findRunningStateLog();
      }
    },
    findAppByCurrentUser() {
      api.findAppByCurrentUser()
        .then(response => {
          this.appList = response;
          this.appListLength = Math.ceil(response.length / 3);
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findRunningInfByCurrentUser(bizDate) {
      api.findRunningInfByCurrentUser(bizDate)
        .then(response => {
          this.appRunning = response;
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findRunningStateLog() {
      api.findRunningStateLog(this.pageIndex)
        .then(response => {
          if (response != null && response.length > 0) {
            this.logList = this.logList.concat(response);
            // console.log(this.logList)
          } else {
            this.hasLogData = false;
          }
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    findNodeByCurrentUser() {
      api.findNodeByCurrentUser()
        .then(response => {
          this.nodeList = response
          // console.log(response)
        })
        .catch(error => {
          this.$notify.error({title: '错误', message: error});
        })
    },
    change(index) {
      this.activeIndex = index;
    },
    toDay() {
      let bizDate = this.$moment(new Date()).format("YYYYMMDD")
      this.bizDate = bizDate;
      this.findRunningInfByCurrentUser(bizDate);
    },
    yesterDay() {
      let bizDate = this.$moment(this.$moment().add(-1, 'days').startOf("day").valueOf()).format("YYYYMMDD");
      this.bizDate = bizDate;
      this.findRunningInfByCurrentUser(bizDate);
    }
  }
}
</script>
